<template>
  <transition name="slide">
    <div  class="modal" v-show="showModal">
      <div class="mask"></div>
      <div class="modal-dialog">
        <div class="modal-header">
          <span v-on:click="$emit('cancel')">标题</span>
          <a href="javascript:;" class="icon-close"  v-on:click="$emit('cancel')"></a>
        </div>
        <div class="modal-body">
          <slot name="body" class="body"></slot>
        </div>
        <div class="modal-footer">
          <a href="javascript:;" v-if="btnType==1" v-on:click="$emit('cancel')" class="btn">确定</a>
          <a href="javascript:;" v-if="btnType==2" v-on:click="$emit('cancel')" class="btn">取消</a>
           <a href="javascript:;" v-if="btnType==3" v-on:click="queding(method)" class="btnenter">确定</a>
          <a href="javascript:;" v-if="btnType==3" v-on:click="$emit('cancel')" class="btn">取消</a>
           
        </div>
      </div>
    </div>
    
  </transition>
</template>



<script>
export default {
  name: "dongtaimotaikuang",
  props: {
    list: {
      type: Array,
      default() {
        return [1,2];
      }
    },
  
    method: { type: Function },
    //弹框标题
    title: String,
    // 按钮类型  1 确定按钮 2 取消按钮 3  确定和取消按钮都有
    btnType: String,
    sureText: {
      type: String,
      default: "确定"
    },
    cancelText: {
      type: String,
      default: "取消"
    },
    yuzhouweiyi:{
        type:String
    },
    showModal: Boolean
  },
  components: {},
  data() {
    return {
      value: "1"
    };
  },
  //方法
  methods: {
      queding(){
          console.log('来到组件的queding里面了')
         
          this.$emit('queding',this.method)
      }
  },
  //计算方法
  computed: {},
  //watch数据监听
  watch: {},
  //数据过滤
  filters: {},
  //生命周期系列
  beforeCreate() {
    console.log("beforecreate", this.$options.name);
  },
  created() {
    console.log("created", this.$options.name);
  },
  beforeMount() {
    console.log("beforeMount", this.$options.name);
  },
  mounted() {
    console.log("mounted", this.$options.name);
  },
  beforeDestroy() {
    console.log("beforeDestroy", this.$options.name);
  },
  destroyed() {
    console.log("destroyed", this.$options.name);
  },
  beforeUpdate() {
    console.log("beforeUpdate", this.$options.name);
  },
  updated() {
    console.log("updated", this.$options.name);
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {});
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  },
  beforeRouteUpdate(to, from, next) {
    // 同一页面，刷新不同数据时调用，
    next();
  },

  beforeRouteLeave(to, from, next) {
    // 离开当前路由页面时调用
    next();
  }
};
</script>





<style scoped lang="scss">





</style>